<template>
  <div class="web">
    <search-banner :banners="banners" />
    <recently-play :playList="playList"/>
    <function-area />
    <hot-game :hotBanners="hotBanners"/>
    <game-content :hotList="hotList" :newestList="newestList" />
  </div>
</template>

<script>
import FunctionArea from "../childComps/FunctionArea.vue"
import HotGame from '../childComps/HotGame.vue';
import RecentlyPlay from '../childComps/RecentlyPlay.vue';
import SearchBanner from "../childComps/SearchBanner.vue"
import GameContent from '../gameContent/GameContent.vue'
export default {
  components: {
    SearchBanner,
    FunctionArea,
    GameContent,
    RecentlyPlay,
    HotGame,
  },
  data() {
    return {
      banners: [],
      hotBanners: [],
      hotList: [],
      newestList: [],
      playList: [],
    };
  },
  created() {
    this.getHomeWeb();
  },
  methods: {
    getHomeWeb() {
      this.axios.get("/home_web.json").then((res) => {
        console.log(res.data)
        this.banners = res.data.slider_list
        this.hotBanners = res.data.recommend_list
        this.playList = res.data.play_list
        this.hotList = res.data.hot_list
        this.newestList = res.data.newest_list
      })
    },
  },
};
</script>

<style lang="less" scoped>
.web {
  position: fixed;
  width: 10rem;
  overflow: auto;
  top: 1.173333rem;
  bottom: 1.306667rem;
  left: 50%;
  transform: translateX(-50%);
}

.web::-webkit-scrollbar {
  display: none;
}
</style>